<template>
  <a-drawer
    v-model:visible="vdata.visible"
    width="40%"
    :title="vdata.isAdd? '新增通道' : '修改通道'"
    :confirm-loading="vdata.btnLoading"
    :maskClosable="false"
    @ok="handleOkFunc"
  >
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      labelAlign="left"
      :wrapper-col="{ span: 22 }"
      layout="vertical"
      :rules="vdata.rules"
      style="margin-top: 30px; margin-left: 20px"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item label="排序" name="sortNum">
            <a-input v-model:value="vdata.saveObject['sortNum']" type="number" :min="0" placeholder="排序" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="通道编号" name="ifCode">
            <a-input v-model:value="vdata.saveObject['ifCode']" placeholder="支付通道" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="通道名称" name="ifName">
            <a-input v-model:value="vdata.saveObject['ifName']" placeholder="支付通道名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="是否为同主体配置" name="isCommSubject">
            <a-select v-model:value="vdata.saveObject['isCommSubject']" placeholder="是否为同主体配置">
              <a-select-option :value="0">同主体</a-select-option>
              <a-select-option :value="1">异主体</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="通道配置" name="authConfig" :wrapper-col="{ span: 23 }">
            <a-textarea v-model:value="vdata.saveObject['authConfig']" :rows="3" :placeholder="vdata['authConfigPlaceholder']" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>
  
<script lang="ts" setup>
import {$ifCodeAddOrEdit} from '@/api/activityManage/ifCode/index'
import { ref, reactive, getCurrentInstance } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
const props = defineProps({
  callbackFunc: { type: Function, default: null }
})
const formRef = ref()
const vdata: any = reactive({
  btnLoading: false, // 显示确定按钮loading图标
  isAdd: true, // 新增 or 修改页面标识
  visible: false, // 是否显示弹层/抽屉
  saveObject: {}, // 数据对象
  rules: {
    sortNum:[{ required: true, message: '排序不能为空', trigger: 'change' }],
    ifCode: [{ required: true, message: '通道编号不能为空', trigger: 'blur' }],
    ifName: [{ required: true, message: '通道名称不能为空', trigger: 'blur' }],
    isCommSubject: [{ required: true, message: '请选择是否为同主体配置', trigger: 'blur' }],
    authConfig: [{ required: true, message: '通道配置不能为空', trigger: 'blur' }],
  }
})

function handleOkFunc() { // 点击【确认】按钮事件
  formRef.value.validate().then(() => {
    const message = vdata.isAdd ? '新增成功' : '修改成功'
    const method = vdata.isAdd ? 'POST' : 'PUT'
    vdata.btnLoading = true
    $ifCodeAddOrEdit(method,vdata.saveObject).then(() => {
      $infoBox.message.success(message)
      props.callbackFunc()
      onClose()
    }).finally(() => {
      vdata.btnLoading = false
    })
  }).catch(() => { })
}

function onClose() {
  vdata.visible = false
}

function show(record) { // 弹层打开事件
  vdata.isAdd = !record
  // 数据清空
  vdata.saveObject = JSON.parse(JSON.stringify(record)) || {}
  vdata.btnLoading = false // 关闭loading
  // 清空验证规则
  if (formRef.value !== undefined) {
    formRef.value.resetFields()
  }
  if(vdata.isAdd){
    vdata.authConfigPlaceholder = '通道配置'
    vdata.rules['authConfig'] = [{ required: true, message: '通道配置不能为空', trigger: 'blur' }]
  }else{
    vdata.authConfigPlaceholder = vdata.saveObject['authConfig']
    delete vdata.saveObject['authConfig']
    delete vdata.rules['authConfig']
  }
  vdata.visible = true
}
defineExpose({ show })
</script>
